<template>
  <div>
    <el-form-item
      label="图片"
      prop="image"
    >
      <el-upload
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :file-list="imgAtt"
        :disabled="disabled"
        :action="uploadUrl"
        :headers="getAuthHeaders()"
        :on-success="imgHandleSuccess"
        :on-remove="imgHandleRemove"
        multiple
        accept=".Webp,.baiBMP,.PCX,.TIF,.GIF,.JPEG,.JPG,.TGA,.EXIF,.FPX,.SVG,.PSD,.CDR,.PCD,.DXF,.UFO,.EPS,.AI,.PNG,.HDRI,.RAW,.WMF,.FLIC,.EMF,.ICO,"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog
        :visible.sync="dialogVisible"
        size="tiny"
        append-to-body
      >
        <img
          width="100%"
          :src="dialogImageUrl"
          alt
        >
      </el-dialog>
    </el-form-item>
    <el-form-item
      label="相关文件"
      prop="file"
    >
      <el-upload
        class="upload-demo"
        :file-list="fileAtt"
        :action="uploadUrl"
        :headers="getAuthHeaders()"
        :on-success="fileHandleSuccess"
        :on-remove="fileHandleRemove"
        :disabled="disabled"
        drag
        multiple
        accept=".doc,.txt,.pdf,.xls,.docx,.xlsx"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div
          slot="tip"
          class="el-upload__tip"
        >
          图片之外的其他文件上传
        </div>
        <div
          slot="tip"
          class="el-upload__tip"
        >
          可接受的文件类型 .doc,.txt,.pdf,.xls,.docx,.xlsx
        </div>
      </el-upload>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "RelatedDocuments",
  props: {
    relatedDocuments: {
      type: Array,
      required: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      imgAtt: [],
      fileAtt: [],
      img_Att: [],
      file_Att: [],
      imgSuffixes: [
        "Webp",
        "baiBMP",
        "PCX",
        "TIF",
        "GIF",
        "JPEG",
        "JPG",
        "TGA",
        "EXIF",
        "FPX",
        "SVG",
        "PSD",
        "CDR",
        "PCD",
        "DXF",
        "UFO",
        "EPS",
        "AI",
        "PNG",
        "HDRI",
        "RAW",
        "WMF",
        "FLIC",
        "EMF",
        "ICO",
      ],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  watch: {
    relatedDocuments (newVal, oldVal) {
      // console.log(newVal, oldVal)
      this.init()
    }
  },
  async created() {
    this.init();
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imgHandleSuccess(res, file, fileList) {
      let att = [];
      fileList.forEach((file) => att.push(file.response ? file.response : file));
      this.img_Att = att;
      this.resPip()
    },
    fileHandleSuccess(res, file, fileList) {
      let att = [];
      fileList.forEach((file) => att.push(file.response ? file.response : file));
      this.file_Att = att;
      this.resPip()
    },
    imgHandleRemove(file, fileList) {
      let att = [];
      fileList.forEach((file) =>
        att.push(file.response ? file.response : file)
      );
      this.img_Att = att;
      this.resPip()
    },
    fileHandleRemove(file, fileList) {
      let att = [];
      fileList.forEach((file) =>
        att.push(file.response ? file.response : file)
      );
      this.file_Att = att;
      this.resPip()
    },
    init() {
      console.log(this.relatedDocuments)
      if(!this.relatedDocuments) {
        return
      }
      let fileList = this.relatedDocuments
      this.imgAtt = []
      this.fileAtt = []
      this.img_Att = []
      this.file_Att = []
      fileList.forEach((item, index) => {
          if (
            this.imgSuffixes.indexOf(item.url.split(".").pop().toUpperCase()) != -1
          ) {
            this.imgAtt.push(item);
          } else {
            this.fileAtt.push(item);
          }
          this.img_Att = this.imgAtt
          this.file_Att = this.fileAtt
        });
    },
    resPip() {  
      let resRelatedDocuments = []
      if(this.img_Att.length > 0 && this.file_Att.length > 0) 
           resRelatedDocuments =  [...this.img_Att, ...this.file_Att]
      if(this.img_Att.length == 0 && this.file_Att.length > 0) 
          resRelatedDocuments =  this.file_Att
      if(this.img_Att.length > 0 && this.file_Att.length == 0) 
          resRelatedDocuments =  this.img_Att
      console.log(resRelatedDocuments, `----------------------------------------------------`)
      this.$emit('getRes', resRelatedDocuments)
    },
  },
};
</script>
